<template>
  <div ref="chartDom" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

const chartDom = ref(null);
let myChart = null;

onMounted(() => {
  if (chartDom.value) {
    myChart = echarts.init(chartDom.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['文化与传媒学院', '信息工程学院', '音乐与体育学院', '财经政法学院', '医学院', '马克思主义学院']
      },
      series: [
        {
          type: 'bar',
          data: [18, 23, 29, 104, 131, 130],
          itemStyle: {
            color: function(params) {
              var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83'];
              return colorList[params.dataIndex];
            }
          }
        }
      ]
    };
    myChart.setOption(option);
  }
});
</script>

<style scoped>
/* Add any custom styles here */
</style>